<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>积分后台管理</title>
		<link rel="icon" href="img/lei_huiyuan_on.png"  size="16x16" />
	</head>
	<body>
<div id="top">

</div>
		<div class="body content"  id="app">
			<div id="left">
				
			</div>

			<div class="right">

				<div class="liebie_title style_hei_16">
					<img src="img/xiugai.png">订单列表
				</div>
        <div class="bottom">
                
                <div class="huiyuan_content_title">
         				<span class="" value="0" @click="changstatus('')" :class="status==''?'huiyuan_content_title_active':''">全部</span>
         				<span value="0"  @click="changstatus(0)" :class="status=='0'?'huiyuan_content_title_active':''">待审核</span>
         				<span value="1" @click="changstatus(1)" :class="status=='1'?'huiyuan_content_title_active':''">进行中</span>
						<span value="2" @click="changstatus(2)" :class="status=='2'?'huiyuan_content_title_active':''">已完成</span>
						<span value="3" @click="changstatus(3)" :class="status=='3'?'huiyuan_content_title_active':''">已取消</span>
						<span value="4" @click="changstatus(4)" :class="status=='4'?'huiyuan_content_title_active':''">审核失败</span>
         		</div>
<div class="chaxun">
                    <div class="chaxun_list">
                		手机号码：
                        <input type="text" name="mobile" v-model="mobile" value="" placeholder="" style="padding-left: 10px;">
                
                    </div>
					<div class="chaxun_list">
						订单编号：
					    <input type="text" v-model="order_number" value="" placeholder="" style="padding-left: 10px;">
					                
					</div>
                
                    <div class="chaxun_anniu style_bai_14" @click="chaxun()">查询</div>
                </div>

            <div class="tab_caozuo ">
                <div style="float:left;  margin-right:1rem;display: flex;align-items: center;" class="table_quanxuan">
                    <input type="checkbox" name="quanxuan" id="quanxuan" style="width:14px; height:14px;"> 全选
                </div>
                <div class="filter-box">
                    <div class="filter-text">
                        <input class="filter-title" type="text" readonly placeholder="操作方式"/>
                        <i class="icon icon-filter-arrow"></i>
                    </div>
                    <select name="filter">
                        <option value=""></option>
                        <option value="del">删除</option>
                    </select>
                </div>
                <input type="submit" name="Submit2" value="确定操作" class="queding style_bai_14">
            </div>

            <!--------列表开始-------->
            <table width="100%" align="center" class="tab_top baoguo " border="0" cellspacing="0" cellpadding="0">
                <tr style="background-color: #FAFAFA;">
                    <td height="40" align="center" class="" width="50px">选择</td>
                    <td align="center" class="" width="80px">序号</td>
                    <td align="left" class="">手机号</td>
					<td align="left" class="">商品</td>
					<td align="left" class="">数量</td>
					<td align="left" class="">总积分</td>
					<td align="left" class="">状态</td>
					<td align="left" class="">订单编号</td>
                    <td align="left" class="" width="170px">创建时间</td>
                    <td align="center" class="" width="180px">操作</td>
                </tr>
                
                <tr align="center" v-for="(item,index) in list"  v-cloak>
                    <td height="40" class=""><input type="checkbox" name="check" class="tab_xuanze" value="{$value['noticeid']}" ></td>
                    <td align="center" class="">{{index+1}}</td>
                    <td align="left" class="">{{item.username}}</td>
                    <td align="left" class="">{{item.productName}}</td>
					<td align="left" class="">{{item.num}}</td>
					<td align="left" class="">{{item.points}}</td>
					<td align="left" class="">{{item.status==0?'待审核':item.status==1?'进行中':item.status==2?'已完成':item.status==3?'已取消':item.status==4?'审核失败':''}}</td>
                    <td align="left" class="">{{item.order_number}}</td>
					<td align="left" class="">{{item.created_at}}</td>
                    <td align="center" class=" style_lv_9 caozuo" >
						   <div class="dd_caozuo style_hong_14">
							   
						   	 <p v-if="item.status==0" @click="pass(item.id,1)">审核通过</p>
							 <p v-if="item.status==0" @click="pass(item.id,4)">审核失败</p>
							 <p v-if="item.status==1" @click="pass(item.id,2)">确认完成</p>
							 <p v-if="item.status==1" @click="pass(item.id,3)">取消订单</p>
						   </div>
					</td>
                </tr>
                
            </table>


            <!--------分页列表开始-------->
            <table border="0" align="center" cellpadding="0" cellspacing="0" class="p_pagelan">
                <tbody>
                <tr>
                    <td class="">
                        
                    </td>
                </tr>
                </tbody>
            </table>


        </div>
			</div>
		</div>
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="layer/layer.js" type="text/javascript" charset="utf-8"></script>
<script src="laydate/laydate.js" type="text/javascript" charset="utf-8"></script>
<script src="js/selectFilter.js" type="text/javascript" charset="utf-8"></script>
<script src="js/get.js" type="text/javascript" charset="utf-8"></script>
<script src="js/gong.js"></script>
<script src="js/fengzhuang.js"></script>
<script src="js/vue.js"></script>
<script>
	var app = new Vue({
	    el: '#app',
	    data:{
	        list :[],
			page:1,
			limit:10,
			pageCount:0,
			mobile:'',
			order_number:'',
			status:''
	    },
		mounted(){
			console.log(localStorage.getItem('token'))
			this.get_list()
		},
		methods:{
			xuanye(page){
				this.page=page
				this.get_list()
			},
			changstatus(status){
				this.status=status+''
				this.get_list()
			},
			pass(orderId,status){
				$.ajaxDirect("/api/updateOrderStatus",'put',{
					'orderId':orderId,
					'status':status
				},
				 (obj)=> {
						  if(obj.code==200){
							  
							  layer.msg(obj.message)
							  setTimeout(()=>{
								history.go(0);					 
							  },500)
				
						  }
				},
				(err)=> {
				        //发送失败
				})
			},
			chaxun(){
				
				this.get_list()
			},
			get_list(){
			    $.ajaxDirect("/api/getOrdersList",'get',{
			    	'page':this.page,
			    	'limit':this.limit,
					username:this.mobile,
					order_number:this.order_number,
					status:this.status
			    },
			     (obj)=> {
			    		  if(obj.code==200){
			    			  
			    			  this.list=obj.orders
							  this.pageCount=Math.ceil(Number(obj.totalCount)/this.limit)

			    		  }
			    },
			    (err)=> {
			            //发送失败
			    })
			}
	
		}
	})	
</script>
<script type="text/javascript">
    $('.filter-box').selectFilter({
        callBack: function (val) {
            //返回选择的值
            console.log(val + '-是返回的值')
        }
    });
    function upload_zheng() {
        $(".img_zheng").text('')
        var files = $('#shenfen_zheng').get(0).files;

        for (var i = 0; i < files.length; i++) {
            var r = new FileReader();
            r.onload = function () {
                var tag = ` <img class='ossimg' src='${this.result}'  alt=''>`
                $(".img_zheng").append(tag)
            };
            r.readAsDataURL(files[i]);
        }
    }

    // //确认提交
    function tijiao() {
        var title = $("#title").val();
        var state=$('input[name="state"]:checked').val()
        var information= $("#information").val();
        if (title == '') {
            layer.open({content: '请输入标题'});
            return false;
        }
        if (state == '') {
            layer.open({content: '请选择公告类型'});
            return false;
        }
        if (information == '') {
            layer.open({content: '请输入公告内容'});
            return false;
        }
        var data = '';
        if($_GET['noticeid']){
            data = {title: title, state: state, information: information,noticeid:$_GET['noticeid']}
        }else{
            data = {title: title, state: state, information: information}
        }
        $.ajax({
            type: 'POST',
            url: '/zuadmin/site/notice',
            data: data,
            dataType: 'json',
            beforeSend: function () {
                layer.load(1, {shade: [0.5, '#fff']}); //加载中 0代表加载的风格，支持0-2
            },
            complete: function () {
                layer.closeAll('loading');//关闭加载中
            },
            success: function (data) {
                var obj = eval(data);
                if (obj.code == 0) {
                    layer.open({content: obj.message});
                    window.location.href = window.location.pathname;
                } else {
                    layer.open({content: obj.message});
                }

            },
            error: function (xhr, type) {
                layer.open({content: '错误'});
            }
        });
    }


    $('.queding').on("click", function () {
        var str = [];
        $("input[name='check']:checked").each(function (index, item) {
            str.push($(this).val())
        });
        var menu = $('select[name="filter"]').val();
        console.log(str, menu)
        if(menu == 'del'){
            $.ajax({
                type: 'POST',
                url: '/zuadmin/site/delnotice',
                data: {noticeid:str},
                dataType: 'json',
                beforeSend: function () {
                    layer.load(1, {shade: [0.5, '#fff']}); //加载中 0代表加载的风格，支持0-2
                },
                complete: function () {
                    layer.closeAll('loading');//关闭加载中
                },
                success: function (data) {
                    var obj = eval(data);
                    if (obj.code == 0) {
                        layer.open({content: obj.message});
                        history.go(0);
                    } else {
                        layer.open({content: obj.message});
                    }

                },
                error: function (xhr, type) {
                    layer.open({content: '错误'});
                }
            });
        }else{
            layer.open({content:'请选择正确操作'});
        }
    });

</script>

<script type="text/javascript">
    $('#quanxuan').click(function () {
        var flag = $(this).is(":checked");
        console.log(flag)
        $(":checkbox[name='check']").prop("checked", flag);
    })
    $('.tab_xuanze').click(function () {
        var flag = true;
        var tbodyO = $('.tab_xuanze')

        for (var j = 0; j < tbodyO.length; j++) {
            //只要存在没被勾选的复选框
            if (!tbodyO[j].checked) {
                //判断标识为假，不影响全选框
                flag = false;
                break;
            }
        }
        $('#quanxuan').prop("checked", flag)
    })
</script>
	</body>
</html>